/* 设置页面的滚动行为 */
html,body{
    /* 让滚动的效果以匀速的效果显示 */
    scroll-behavior: smooth;
}
/* 使用css解析器 less 需要配合js中的文件使用 */
.navbar{
    margin: 0;
    border: 0;
    background-color: #111111;
    border-radius: 0;
    overflow: hidden;
    .logo{
        text-transform: uppercase;
        font-weight: bold;
        color:#fff;
      }
    .navbar-collapse .nav li a{
        cursor: pointer;
        color: #fff;
        /* font-weight: bold; */
        text-transform: uppercase;
        /* 让盒子下边框扩大的时候透明不显示 */
        border-bottom:3px solid transparent ;
        /* 0.3s */
        transition: all linear .3s;
        /* 使用and 符是和上面a是一样的 */
        &:hover{
            border-bottom-color: #cccccc;
            // color: red;
            // color: #fff;

        }
    }
    
        /* 媒体查询 
    css的语法 写规则 当浏览器尺寸 到达指定尺寸 执行某些样式规则
    */
    /* 770px 当前屏幕 */
    /* 770px 以下 让导航元素居中 */
    /* 770px 以下 理解成 小于等于 770px(条件的最大值) max-width:770px */
    /* 
    优点: PC端和移动端 切换的时候 样式有变化 用媒体查询工具 写不同样式表来兼容
    缺点: 多写重复代码 


    */
    /* @media screen(屏幕) and(关键词) 条件 */
    /* 当前屏幕尺寸 <= 770px 情况下 成立 */

    @media screen and (max-width:770px) {
        .nav li a{
            text-align: center;
        }
    }
    .navbar-toggle{
        margin-top: 13px;
    }
    
}
/* 触碰时下拉框变成黑色 */
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
        background-color: #111;
        color: #fff;
    }   
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #fff;
    }
/* 第二片 */
.banner{
    background-color: #111;
    padding-top: 8em;
    padding-bottom: 3em;
    text-align: center;
    width: 100%;
    .title{
        font-weight: lighter;
        font-size: 5em;
        text-transform: uppercase;
        color: #999;
        span{
        font-weight: bold;
        color: #fcac45;
        }
    }
    @media screen and (max-width:1330px){
        .title{
            font-size: 3em;
        }      
    }
    .desc{
        text-transform: uppercase;
        font-size: 2em;
        font-weight: lighter;
        color: #999;
        margin-bottom: 12em;
        span{
        font-weight: bold;
        color: #fff;
        }
    }
    @media screen and (max-width:1330px){
        .desc{
            font-size: 1em;
        }      
        
    }
    @media screen and (max-width:670px){
        .desc{
            font-size: 0.75em;
        }      
        
    }
    .more{
        // text-align: end;
        color: #999;
        text-align: center;
        line-height: 3em;
        font-weight: bold;
        width: 3em;
        height: 3em;
        border-radius: 50%;
        border: 2px solid #999;
        &:hover{
            transform: translateY(-10px);
            box-shadow: 0px 2px 2px 3px #cccccc;
            transition:linear .3s;
        }
    }
    @media screen and(max-width:400px) {
        .title{
            font-size: 1.8em;
        }
    }
}

/* 第3部分 */
.about{
    padding: 5em 0em;
    width: 100%;
    background-color: #fff;
    .container{
        display: flex;
        /* flex元素会自动缩放 */
        justify-content: space-between;

        flex-wrap: nowrap;
        /* stretch等高 */
        align-items: stretch;
        /*  拉伸项目以填满交叉轴上的空间 */
        align-content: stretch;
        // text-align: ce;
       
        .left{
            width: 55%;
            /* 禁止缩放 */
            flex-shrink: 0;
            display: flex;
            // justify-content: center;
            // text-align: center;
      
        }
        .right{
            width: 45%;
            .title{
                .top{
                    color: #cccccc;
                    text-transform: uppercase;
                    font-size: 1.5em;
                }
                .bottom{
                    color: #111;
                    text-transform: uppercase;
                    font-size: 2em;
                    flex-shrink: 0;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    span:nth-child(1){
                        // font-weight: bold;
                        // overflow: visible;

                        // padding-bottom:10px;
                        border-bottom: 4px solid transparent;
                        border-bottom-color:#fcac45 ;
                    }
                    span:nth-child(2){
                        font-weight: bold;
                    }
                }
            }
            .content{
                color: #cccccc;
                // width: 400px;
                font-size: 1em;
                margin-top: 2em;
                margin-bottom: 3em;
            }
            li{
                margin-bottom: 1em;
                font-size: 1em;
                font-weight: bolder;
                /* 省略号 */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                // text-align: center;
                span:first-of-type{
                    top: 2px;
                    margin-right: 8px;
                }
                span:last-of-type{
                font-weight: lighter;
                margin-left: 5px;

                    color: #cccccc;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .more{
                margin-top: 4em;
                padding: 10px;
                font-size: 1em;
                color: #cccccc;
                border: 2px solid #cccccc;
                text-align: center;
                display: flex;
                justify-content: center;
                border-radius: 5px;
                align-items: center;
                align-content: stretch;
                width: 40%;
                cursor: pointer;
               
                &:hover{
                    transform: translateY(-5px);
                    box-shadow: 0px 10px 10px 5px #7f7f7f;
                    transition: linear .3s;
    
                }
                span:first-of-type{
                    margin-right: 8px;
                    }
                span:last-of-type{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-transform: uppercase;
                    
                    }
            }
        }
       
    }
    @media screen and (max-width:1000px) {
        .container{
            margin-left: 1.5em;
          .right{
              width: 100%;
              
           }
           .left{
              display: none;
          }
         }
      }

      @media screen and (max-width:500px) {
        .container{
            margin-left: 1.5em;
          .right{
              width: 100%;
              .title{

                .top{
                    font-size: 1em;
                }
                .bottom{
                    font-size: 1.5em;

                }

              }
              .content{
                font-size: .8em;
              }
           }
         }
      }
    
}
/* 第4部分 */
.team{
    background-color: #111;
    overflow: hidden;
    width: 100%;
    padding: 5em 0em 2em;
    .title{
        width: 100%;
        color: #fff;
        font-family: OSLight;
        font-size: 3em;
        text-align: center;
        background-image: url('../images/title_bg.png');
        background-position: center bottom;
        background-repeat: no-repeat;
        padding-bottom: 0.5em;
        margin-bottom: 2em;
        span{
            font-family: OSblok;
        }
    }
    .list{
        display: flex;
        // flex-direction: column;
        justify-content: space-between;
        /* 不换行 */
        flex-wrap: nowrap;
        // align-items: stretch;
        // align-content: stretch;
        .item{
            width: 23%;
            .avatar{
                width: 50%;
                border-radius: 50%;
                margin: 0 auto;
                overflow: hidden;
            }
            .box{
                color: #ccc;
                // font-family: OSLight;
                text-align: center;
                font-size: 1.2em;
                margin-top: 1em;
                .nickname{
                    color: #fff;
                    font-size: 1.5em;
                }
                .content{
                    font-size: 1em;
                   
                    // white-space: nowrap;
                    // overflow: hidden;
                    // text-overflow: ellipsis;
                    margin-bottom: 5em;
    
                }
                .job{
                    margin-bottom: 2em;
                }
            }
        }
        
    }
    .more{
        width: 100%;
        text-align: center;

        span{
            width: 1em;
            height: 1em;
            background-color: #fff;
            display: inline-block;
            cursor: pointer;
            transition: all linear .3s;
            margin-right: 10px;
            &:hover{
                background-color: #fcac45;
            }
        }
    }
    /* 使用媒体查询实现 */
    @media screen and (max-width:600px) {
        .container{
            margin-left: 1.5em;
            .list{
                flex-wrap: wrap;
                .item{
                    width: 100%;
                    margin-bottom: 2em;

                    display: flex;
                    align-items: stretch;
                    align-content: stretch;
                    .avatar{
                    border-radius: 0;
                    width: 40%;
                    flex-shrink: 0;

                    }
                    .box{
                        
                        margin-top: 0;
                        margin-left: 1.5em;
                        text-align: left;
                        .content{
                            width: 90%;
                            height: 5em;
                            overflow-x: hidden;
                            overflow-y: auto;
                            margin-bottom: 0;
                        }
                    }
                }
    
            }
        }
    }
    @media screen and (max-width:500px) {
        .container{
            margin-left: 1.5em;
            .list{
                flex-wrap: wrap;
                .item{
                    width: 100%;
                    margin-bottom: 2em;

                    display: flex;
                    align-items: stretch;
                    align-content: stretch;
                    .avatar{
                    border-radius: 0;
                    width: 40%;
                    flex-shrink: 0;

                    }
                    .box{
                        
                        margin-top: 0;
                        margin-left: 1.5em;
                        text-align: left;
                        font-size: 1.2em;
                        .content{
                            width: 90%;
                            height: 5em;
                            overflow-x: hidden;
                            overflow-y: auto;
                            margin-bottom: 0;
                            font-size: .8em;
                        }
                        .nickname{
                            font-size: 1.3em;
                        }
                    }
                }
    
            }
        }
    }
    @media screen and (max-width:400px) {
        .title{
            font-size: 1.8em;
            padding-bottom: 1em;
        }
    }
        
}
/* 第5部分 */
.services{
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    padding: 5em 0em 5em;
    .title{
        width: 100%;
        color: #111;
        text-transform: uppercase;
        font-family: OSLight;
        text-transform: uppercase;
        font-size: 3em;
        text-align: center;
        background-image: url('../images/title_bg.png');
        background-position: center bottom;
        background-repeat: no-repeat;
        padding-bottom: 0.5em;
        margin-bottom: 1em;
        span{
            font-family: OSblok;
        }
    }
    .desc{
        width: 90%;
        font-family: OSLight;
        line-height: 1.5em;
        text-align: center;
        margin: 0 auto;
        font-size: 1.2em;
        color: #363434;
        margin-bottom: 5em;
    }
    .list{
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        .item{
            width: 23%;
            .avatar{
                width: 50%;
                border-radius: 50%;
                margin: 0 auto;
                overflow: hidden;
                border: 3px solid #fcac45;
            }
            .box{
                color: #ccc;
                // font-family: OSLight;
                text-align: center;
                font-size: 1.2em;
                margin-top: 1em;
                .nickname{
                    color: #111;
                    font-size: 1.5em;
                    margin-bottom: 2em;
                    font-family: OSBold;
                }
                .content{
                    color: #2f2f2f;
                }
            }
        }
        
    }
    @media screen and (max-width:1000px){
        .container .title{
            font-size: 2em;
        }
    }
    @media screen and (max-width:700px){
        .container{
            .title{
                font-size: 2em;
            }
            .list{
                .box{
                    .nickname{
                        font-size: 1.2em;
                    }
                }
            }
            
        }

    }
        /* 使用媒体查询实现 */
    @media screen and (max-width:600px) {
        .container{
            margin-left: 1.5em;
            .title{
                font-size: 1.8em;
            }
            .list{
                flex-wrap: wrap;
                .item{
                    width: 100%;
                    margin-bottom: 2em;
                        
                    display: flex;
                    align-items: stretch;
                    align-content: stretch;
                    .avatar{
                    border-radius: 0;
                    width: 30%;
                    flex-shrink: 0;
                    text-align: center;

                    }
                    
                    .box{ 
                        margin-top: 0;
                        margin-left: 1.5em;
                        text-align: left;
                        .nickname{
                            margin-bottom: 0.8em;
                        }
                        .content{
                            width: 90%;
                            height: 5em;
                            overflow-x: hidden;
                            overflow-y: auto;
                            margin-bottom: 0;
                        }      
                    }
                }
            }
        }
    }
    @media screen and (max-width:500px) {
        .container{
            margin-left: 1.5em;
            .title{
                font-size: 1.8em;
            }
            .desc{
                margin-bottom: 1.5em;
            }
            .list{
                flex-wrap: wrap;
                .item{
                    width: 100%;
                    margin-bottom: 2em;
                        
                    display: flex;
                    align-items: stretch;
                    align-content: stretch;
                    .avatar{
                    border-radius: 0;
                    width: 40%;
                    flex-shrink: 0;
                    text-align: center;

                    }
                    
                    .box{ 
                        margin-top: 0;
                        margin-left: 1.5em;
                        text-align: left;
                        .nickname{
                            margin-bottom: 0.5em;
                        }
                        .content{
                            width: 90%;
                            height: 4.5em;
                            overflow-x: hidden;
                            overflow-y: auto;
                            margin-bottom: 0;
                        }      
                    }
                }
            }
        }
    }
    @media screen and (max-width:400px) {
        .container .title{
            font-size: 1.2em;
            padding-bottom: 1em;
        }
        .container .desc{
            font-size: .8em;
        }
        .container .list{
            .box{
                .content{
                    font-size: .8em;
                }
            }
        }
    }
}
/* 第6部分 */
.team2{
    background-color: #111;
    overflow: hidden;
    width: 100%;
    padding: 5em 0em 2em;
    .title{
        width: 100%;
        color: #fff;
        text-transform: uppercase;
        font-family: OSLight;
        font-size: 3em;
        text-align: center;
        background-image: url('../images/title_bg.png');
        background-position: center bottom;
        background-repeat: no-repeat;
        padding-bottom: 0.5em;
        margin-bottom: 2em;
        span{
            font-family: OSblok;
        }
    }
    .list{
        display: flex;
        width: 100%;
        justify-content: space-between;
        flex-wrap: nowrap;
        // margin-bottom: 4em;
        flex-shrink: 0;

        .item{
            text-align: center;
            width: 20%;
        }

    }
    .more{
        width: 100%;
        text-align: center;
        margin-top: 5em;
        span{
            width: 1em;
            height: 1em;
            background-color: #fff;
            display: inline-block;
            cursor: pointer;
            transition: all linear .3s;
            margin-right: 10px;
            &:hover{
                background-color: #fcac45;
            }
        }
    }
    @media screen and (max-width:1000px) {
        .container{
            // margin-left: 1.5em;
           .title{
            font-size: 2.5em;
           }
           .list{
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            .item{
                width: 33%;
                text-align: center;

                margin-bottom: 1em;
            }
           }
        }
    }
    @media screen and (max-width:600px) {
        .container{
            // margin-left: 1.5em;
           .title{
            font-size: 2em;
            padding-bottom: 1em;
           }
           .list{
            flex-wrap: wrap;
            .item{
                width: 100%;
                text-align: center;
                margin-bottom: 1.5em;
            }
           }
        }
    }
    @media screen and (max-width:400px) {
        .container .title{
            font-size: 1.6em;
            padding-bottom: 1em;
        }
    }
}
/* 第7部分 */
.work{
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    padding: 5em 0em 2em;
    .title{
        width: 100%;
        color: #111;
        font-family: OSLight;
        text-transform: uppercase;
        font-size: 3em;
        text-align: center;
        background-image: url('../images/title_bg.png');
        background-position: center bottom;
        background-repeat: no-repeat;
        padding-bottom: 0.5em;
        margin-bottom: 1em;
        span{
            font-family: OSblok;
        }
    }
    .desc{
        width: 90%;
        font-family: OSLight;
        line-height: 1.5em;
        text-align: center;
        margin: 0 auto;
        font-size: 1.2em;
        color: #363434;
        /* italic 斜体 */
        font-style: italic;
        margin-bottom: 5em;
    }
    .box{
        width: 100%;
        .top{
            width: 100%;
            display: flex;
            justify-content: space-between;
            // border: 2px solid blue;
            font-size: 1.2em;
            margin-bottom: 3em;
            .left{
                font-family: OSBold;
                color: #111;
                text-transform: uppercase;
                /* 省略号 */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .right{
               a{
                border-right:1px solid #ccc;
                padding-right: 1em;
                cursor: pointer;
                color: #363434;
                margin-right: 10px;
                transition: all linear .3s;
                overflow: hidden;
                white-space: nowrap;
                text-overflow:ellipsis;
                &:hover{
                    transform: translateY(-10px);
                    color: #111;
                    text-shadow: 0px 5px 10px #ccc;
                }
                &:last-child{
                    border-right: 0;
                    padding: 0;
                }
               }


            }
            select{
                display: none;
            }
        }
        .list{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 100%;
            .item{
                width: 24%;
                position: relative;
                cursor: pointer;
                overflow: hidden;
                margin-bottom: 1em;
                img{
                    width: 100%;
                }
                &:hover .mask{
                    top: 0;
                    // display: block;
                }
                .mask{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    background-color: #111;
                    text-align: center;
                    top: -100%;
                    overflow: hidden;
                    left: 0;
                    // display: none;
                    transition: all linear .3s;
                    .title1{
                        color: #fff;
                        text-transform: uppercase;
                        font-family: OSBold;
                        font-size: 1.3em;
                        margin-top: 3.5em;
                    }
                    .desc1{
                        color: #999;
                        font-size: 1em;
                        margin-bottom: 2em;
                    }
                    .plus{
                        width: 2em;
                        height: 2em;
                        line-height: 2em;
                        border-radius: 50%;
                        color: #fcac45;
                        display: inline-block;
                        border: 1px solid #fcac45;
                        text-align: center;
                    }
                   
                }
              
            }
        }
    }
    @media screen and (max-width:1000px){
        .box .list .item .mask .title1{
            font-size: 1em;
        }
        .box .list .item .mask .desc1{
            font-size: .8em;
        }
    }
    @media screen and (max-width:600px) {
        .box .top .right{
            display: none;
        }
        .box .top .menu{
            display: block;
        }
        .title{
            font-size: 2em;
        }
        .box .list .item{
            width: 32%;
        }
        
    }
    @media screen and (max-width:500px) {
        .box .list .item{
            width: 49%;
        }
        .box .list .item .mask .title1{
            font-size: 1.3em;
        }
        .box .list .item .mask .desc1{
            font-size: 1em;
        }
    }
    @media screen and (max-width:400px) {
        .title{
            font-size: 1.6em;
            padding-bottom: 1em;
        }
        .box .list .item{
            width: 100%;
        }

        .box .list .item .mask .title1{
            margin-top: 2em;
            font-size: 2em;
        }
        .box .list .item .mask .desc1{
            margin-bottom: 4em;
            font-size: 1.2em;
        }
        .box .list .item .mask .plus{
            width: 3em;
            height: 3em;
            line-height: 3em;
            
        }
    }
}
/* 第8部分 */
.tesimonials{
    background-color: #111;
    overflow: hidden;
    width: 100%;
    padding: 5em 0em 2em;
    .title{
        text-transform: uppercase;
        width: 100%;
        color: #fff;
        font-family: OSBolk;
        font-size: 3em;
        text-align: center;
        background-image: url('../images/title_bg.png');
        background-position: center bottom;
        background-repeat: no-repeat;
        padding-bottom: 0.5em;
        margin-bottom: 2em;
        span{
            font-family: OSLight;
        }
    }
    .desc{
        width: 100%;
        color: #ccc;
        text-align: center;
        font-size: 1.5em;
        text-transform: uppercase;
        margin-bottom: 2em;
    }
    .text{
        width: 100%;
        color: #ccc;
        text-align: center;
        font-size: 1.5em;
        font-family: OSBold;
        margin-bottom: 2.5em;

        span{
            color:#6f6f6f ;
            font-family: OSLight;
        }
    }
    .more{
        width: 100%;
        text-align: center;

        span{
            width: 1em;
            height: 1em;
            background-color: #fff;
            display: inline-block;
            cursor: pointer;
            transition: all linear .3s;
            margin-right: 10px;
            &:hover{
                background-color: #fcac45;
            }
        }
    }
    /* 使用媒体查询实现 */
    @media screen and (max-width:1000px) {
        .container{
            // margin-left: 1.5em;
           .title{
            font-size: 2.5em;
           }
           .desc,.text{
            font-size: 1em;
           }
        }
    }
    @media screen and (max-width:600px) {
        .container{
            // margin-left: 1.5em;
           .title{
            font-size: 2em;
           }
           .desc,.text{
            font-size: 0.8em;
           }
        }
    }
    @media screen and (max-width:400px) {
        .container .title{
            font-size: 1.6em;
            padding-bottom: 1em;
        }
    }
        
}
/* 最后一页 */
.contact{
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    padding: 5em 0em 2em;
    .title{
        width: 100%;
        color: #111;
        font-family: OSLight;
        text-transform: uppercase;
        font-size: 3em;
        text-align: center;
        background-image: url('../images/title_bg.png');
        background-position: center bottom;
        background-repeat: no-repeat;
        padding-bottom: 0.5em;
        margin-bottom: 1em;
        span{
            font-family: OSblok;
        }
    }
    .desc{
        width: 90%;
        font-family: OSLight;
        line-height: 1.5em;
        text-align: center;
        margin: 0 auto;
        font-size: 1.2em;
        color: #ccc;
        /* italic 斜体 */
        font-style: italic;
        margin-bottom: 5em;
    }
    .box{
        width: 100%;
        .info{
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            flex-shrink: 0;
            align-items: stretch;
            // border: 3px solid #111;
            .item{
                width: 49%;
                display: flex;
                // flex-direction: column;
                flex-wrap: wrap;
                text-align: left;
                margin-bottom: 3em;

                // border: 3px solid #111;
                div,input{
                    width: 100%;
                    // height: 2.5em;
                }
                .label{
                    font-size: 1em;
                    color: #ccc;
                    text-align: left;
                    font-weight: bold;
                    padding-left:0 ;
                    sup{
                        color:red;
                    }
                }
                input{
                    text-indent: 1em;
                    height: 2.5em;
                    line-height: 2.5em;
                    border: 1px solid #7f7f7f;
                    font-size: 1.2em;
                }
            }
        }
        .message{
            width: 100%;
            margin-bottom: 2em;
            div,textarea{
                width: 100%;
            }
            .label{
                font-size: 1.2em;
                color: #ccc;
                font-weight: bold;
                text-align: left;
                padding-left:0 ;
                sup{
                    color:red;
                }
            }
            textarea{
                font-size: 1.2em;
            }
        }
        .button{
            width: 100%;
            text-align: right;

            button{
                width: 20%;
                height: 3em;
                background-color: #fcac45;
                border: 0;
                color: #fff;
                text-transform: uppercase;
                font-size: 1.2em;
                transition: all linear .3s;
                &:hover{
                    transform: translateY(-10px);
                    box-shadow: 0px 10px 10px 5px #ccc;
                }
            }
            

        }
    }
    

    @media screen and (max-width:600px) {
        .title{
            font-size: 2.5em;
        }
       .box .info{
            flex-wrap: wrap;
            padding: 0 1em;
            .item{
                width: 100%;
            }
        }
        .box .message{
            flex-wrap: wrap;
            padding: 0 1em;
            .item{
                width: 100%;
            }
        }
        .box .button{
            text-align: center;
            button{
                width: 30%;
                height: 2.5em;  
            }
        }
    }
    @media screen and (max-width:500px) {
        .title{
            font-size: 2em;
        }
    }
    @media screen and (max-width:400px) {
        .title{
            font-size: 1.6em;
            padding-bottom: 1em;
        }
    }
}

footer{
    background-color: #111;
    overflow: hidden;
    width: 100%;
    padding: 3em 0em 2em;
    .container{
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        .copyright{
            font-size: 1em;
            text-align: left;
        }
        .link{
            width: 30%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            align-content: center;
            .item{
                border: 3px solid #7f7f7f;
                border-radius: 50%;
                transition: all linear .3s;
                img{
                    width: 3em;
                    height: 3em;
                    
                }
                &:hover{
                    transform: translateY(-10px);
                    box-shadow: 0px 10px 10px 5px #7f7f7f;
                }
            }
            
        }
        
    }
    @media screen and (max-width:800px) {
        .container{
            flex-wrap: wrap;
        } 
        .container .copyright{
            width: 100%;
            text-align: center;
        }
        .container .link{
            width: 100%;
            text-align: center;
        }
    }
}







